<template>
  <el-input v-model="value">
    <template #append>
      <el-button @click="goEditCalculated()">编辑</el-button>
    </template>
  </el-input>
  <el-dialog title="计算表达式" v-model="openCalculation" append-to-body width="800">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-input v-model="calculation"
                  :rows="20"
                  type="textarea"
                  placeholder="请输入表达式"></el-input>
      </el-col>
      <el-col :span="8" >
        <el-input v-model="calculationFilterString"
                  placeholder="搜索"></el-input>
        <div class="calculationFilter">
          <div v-for="item in calculationFieldList" :key="item" @click="selectCalculationField(item)">{{item}}</div>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="submitCalculation">确 定</el-button>
      <el-button @click="openCalculation = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "CalculateEditor",
  props: ['value'],
  inject: ['getContainerWidgets','getFieldWidgets'],
  data() {
    return {
      openCalculation:false,
      calculationFilterString:"",
      calculation:"",
      calculationMode:"",
    }
  },
  computed: {
    value: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
      calculationFieldList(){
        let fields = [];
        this.getFieldWidgets().forEach(function (val){
          fields.push(val.field.options.fieldName)
        })
        return fields.filter(item => item.includes(this.calculationFilterString))
      },
    },
  },
  methods: {
    goEditCalculated(){
      this.calculation = this.value;
      this.openCalculation = true;
    },
    selectCalculationField(item){
      this.calculation += item;
    },
    submitCalculation(){
      this.openCalculation = false;
/*      this.value = this.calculation;
      this.$emit("input", this.calculation);*/
    },
  }
}
</script>

<style lang="scss" scoped>
.calculationFilter{
  width: 100%;
  height: calc(100% - 30px);
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid gainsboro;
  border-radius: 5px;
  margin-top: 8px;
  div{
    width: 100%;
    height: 35px;
    line-height: 35px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    border-bottom: 1px solid gainsboro;
    cursor: pointer;
    &:hover{
      background-color: #e5e5e5;
    }
  }
}
</style>
